<script setup>
    import {counterStore} from "../stores/counterStore";
    const counter=counterStore();

    const handleMenuItemClick = (index) => {
        counter.activeIndex.value = index;
    };
</script>
<template>
    
    <el-container style="background-color: #f8f9f8;">
        <el-header style="box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);padding-bottom: 70px;background-color: white;">
              <el-row>
                  <el-col :span="6" :xs="12" style="display: flex;flex-direction: row;align-items: center;">
                      <img src="/images/主页/u128.png" style="height:50px;padding-right: 8px;"/>
                      <h1>双碳招投标网</h1>
                  </el-col>
                  <el-col :span="12" :xs="12">
                      <el-menu class="header-menu" :default-active="counter.activeIndex" mode="horizontal" :ellipsis="false" style="border-bottom: none !important;margin-top: 10px;display: flex;flex-direction: row;justify-content: center;gap: 30px;"> 
                          <el-menu-item index="1" @click="handleMenuItemClick('1')" style="font-size: 17px;">
                              <router-link to="/PlatUpdates">平台动态</router-link>
                          </el-menu-item>
                          <el-menu-item index="2" @click="handleMenuItemClick('2')" style="font-size: 17px;">
                            <router-link to="/zcfg">政策法规</router-link></el-menu-item>
                          <el-menu-item index="3" @click="handleMenuItemClick('3')" style="font-size: 17px;">
                            <router-link to="/ReportViolationPage">违规投诉</router-link>
                          </el-menu-item>                        
                      </el-menu>
                  </el-col>                   
                  <el-col :span="6" :xs="0" style="display: flex;flex-direction: row;align-items: center;justify-content: flex-end">
                    <router-link to="/Profile" class="avatar-wrapper">
                      <img src="/pic5.png" alt="用户头像" class="user-avatar" />
                      <span style="color: black;">admin</span>
                    </router-link>
                  </el-col>
              </el-row>
        </el-header>
    </el-container>
</template>

<style scoped>   
/* 一、全局样式 */
    * {
        margin: 0;
        padding: 0;
    } 
    /* 修改a标签样式 */
    a{
        text-decoration: none;
    }

/* 菜单栏鼠标悬停状态下 文字、下划线状态 */         
    :deep(.header-menu .el-menu-item:hover) {
        color: #60ad99 !important;      
    } 
/* 菜单栏选中状态下 文字、下划线状态 */
    :deep(.header-menu .el-menu-item.is-active) {
        color: #60ad99 !important;      
        font-weight: bold;                
        border-bottom: 2px solid #60ad99;
    }
/* 修改所有菜单项背景 */
    :deep(.header-menu .el-menu-item) {
        background-color: transparent !important; 
    }
.el-container {
    max-width: 1200px;
    margin: 0 auto;
}

.avatar-wrapper{
    display: flex;
    align-items: center;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  padding-right: 10px;
}

</style>
